<template>
    <button @click="count++"> 加一 </button>
    <button @click="setReadonly_count()"> 设置readOnly </button><br/>
    count: {{ count }}<br/><br/>

    <button @click="person.hobby[0].name += '~'"> 加~ </button>
    <button @click="setReadonly_person()"> 设置readOnly </button><br/>
    <button @click="setReadonly_person2()"> 设置shallowReadonly </button><br/>
    people 里的 hobby[0] 的 name: {{ person.hobby[0].name }}<br/>
</template>

<script>
import { ref, reactive, readonly, shallowReadonly } from 'vue';

export default {
    name: 'StudyReadonly',
    setup() {
        let count = ref(0)
        let person = reactive({
            name: 'BadPig',
            age: 25,
            hobby: [
                {
                    name: 'cycling',
                    star: 9
                }
            ]
        })

        // count = readonly(count)

        //放在函数里设置不行！
        function setReadonly_count() {
            count = ref(readonly(count))
            count.value ++
        }

        function setReadonly_person() {
            person = readonly(person)
        }

        person = readonly(person)

        function setReadonly_person2() {
            person = shallowReadonly(person)
        }

        return {
            count,
            person,
            setReadonly_count,
            setReadonly_person,
            setReadonly_person2
        }
    }

}
</script>

<style></style>